Валідація JavaScript Proxy Handler: Типобезпечний перехоплення об'єктів

JavaScript Proxies надають потужний механізм для перехоплення та налаштування фундаментальних об'єктних операцій. Одним з найбільш вагомих випадків використання є валідація даних. За допомогою Proxy handlers ви можете застосовувати обмеження та типобезпеку до властивостей об'єкта, що призводить до більш надійного та підтримуваного коду. Ця публікація в блозі досліджує, як використовувати JavaScript Proxies для ефективної валідації об'єктів, пропонуючи практичні приклади та вказівки для розробників будь-якого рівня. Ми розглянемо різні методи обробки та продемонструємо, як їх можна використовувати для забезпечення цілісності даних.

Розуміння JavaScript Proxies

Перш ніж занурюватися у валідацію, давайте коротко розглянемо, що таке JavaScript Proxies і як вони працюють. Об'єкт Proxy обгортає інший об'єкт (ціль) і перехоплює операції, що виконуються над цією ціллю. Proxy дозволяє визначити власну поведінку для таких операцій, як отримання властивості, встановлення властивості, виклик функції або створення нового об'єкта. Ця настройка досягається за допомогою handler, який є об'єктом, що містить методи, які перехоплюють певні операції.

Основний синтаксис для створення Proxy:

            const proxy = new Proxy(target, handler);
            

              
                Copy
              
            
          

• target: Об'єкт для обгортання за допомогою Proxy.
• handler: Об'єкт, що містить методи (пастки), які перехоплюють операції над ціллю.

Методи Proxy Handler для валідації

Об'єкт handler може містити різні методи, кожен з яких відповідає різній операції над цільовим об'єктом. Ось деякі з найбільш релевантних методів для валідації:

• get(target, property, receiver): Перехоплює доступ до властивості.
• set(target, property, value, receiver): Перехоплює присвоєння властивості.
• apply(target, thisArg, argumentsList): Перехоплює виклики функцій.
• construct(target, argumentsList, newTarget): Перехоплює оператор new.
• deleteProperty(target, property): Перехоплює оператор delete.
• defineProperty(target, property, descriptor): Перехоплює визначення властивості.
• has(target, property): Перехоплює оператор in.
• ownKeys(target): Перехоплює Object.getOwnPropertyNames(), Object.getOwnPropertySymbols() і Reflect.ownKeys().
• preventExtensions(target): Перехоплює Object.preventExtensions().
• getPrototypeOf(target): Перехоплює Object.getPrototypeOf().
• setPrototypeOf(target, prototype): Перехоплює Object.setPrototypeOf().

Ми зосередимося в основному на обробниках get, set, apply і construct, оскільки вони найчастіше використовуються для цілей валідації.

Валідація присвоєння властивостей за допомогою обробника set

Обробник set має вирішальне значення для валідації присвоєння властивостей. Він дозволяє перехоплювати спроби змінити властивості об'єкта та застосовувати обмеження до того, як фактично відбудеться присвоєння.

Приклад: Перевірка типу

Давайте створимо Proxy, який забезпечує перевірку типу для властивостей об'єкта Person. Ми переконаємося, що name завжди є рядком, а age завжди є числом.

            const person = {
  name: 'John Doe',
  age: 30
};

const validator = {
  set: function(target, property, value) {
    if (property === 'name' && typeof value !== 'string') {
      throw new TypeError('Name must be a string');
    }
    if (property === 'age' && typeof value !== 'number') {
      throw new TypeError('Age must be a number');
    }
    // The following line is crucial for ensuring the property is actually set.
    target[property] = value;
    return true; // Indicate success
  }
};

const proxy = new Proxy(person, validator);

proxy.name = 'Jane Smith'; // Works fine
proxy.age = 25; // Works fine

try {
  proxy.age = '40'; // Throws TypeError
} catch (e) {
  console.error(e);
}

console.log(proxy.age); // Output: 25

            

              
                Copy
              
            
          

У цьому прикладі обробник set перевіряє тип значення, що присвоюється name та age. Якщо тип неправильний, він викликає TypeError, запобігаючи присвоєнню. Важливо включити `target[property] = value;` в обробник, щоб фактично встановити значення; інакше властивість не буде оновлено.

Приклад: Валідація діапазону

Ми також можемо перевірити, чи потрапляє властивість у певний діапазон. Наприклад, давайте переконаємося, що age завжди знаходиться між 0 і 120.

            const person = {
  name: 'John Doe',
  age: 30
};

const validator = {
  set: function(target, property, value) {
    if (property === 'age') {
      if (typeof value !== 'number') {
        throw new TypeError('Age must be a number');
      }
      if (value < 0 || value > 120) {
        throw new RangeError('Age must be between 0 and 120');
      }
    }
    target[property] = value;
    return true;
  }
};

const proxy = new Proxy(person, validator);

proxy.age = 50; // Works fine

try {
  proxy.age = -5; // Throws RangeError
} catch (e) {
  console.error(e);
}

            

              
                Copy
              
            
          

Валідація доступу до властивостей за допомогою обробника get

Хоча обробник get менш поширений для суворої валідації, його можна використовувати для виконання перетворень або валідацій, коли здійснюється доступ до властивості. Наприклад, ви можете відформатувати номер телефону або переконатися, що дата є дійсною, перш ніж повертати її.

Приклад: Властивості лише для читання

Ви можете імітувати властивості лише для читання, викликаючи помилку, коли хтось намагається отримати доступ до властивості, яку не слід читати безпосередньо.

            const config = {
  apiKey: 'secret_key'
};

const validator = {
  get: function(target, property) {
    if (property === 'apiKey') {
      throw new Error('Cannot directly access apiKey. Use a secure method.');
    }
    return target[property];
  }
};

const proxy = new Proxy(config, validator);

try {
  console.log(proxy.apiKey); // Throws Error
} catch (e) {
  console.error(e);
}

            

              
                Copy
              
            
          

Цей підхід запобігає прямому доступу до конфіденційних даних, змушуючи розробників використовувати більш контрольований метод отримання ключа (наприклад, функцію, яка обробляє автентифікацію).

Валідація викликів функцій за допомогою обробника apply

Обробник apply дозволяє перехоплювати виклики функцій і перевіряти аргументи, передані функції. Це особливо корисно для забезпечення того, щоб функції отримували правильні типи та кількість аргументів.

Приклад: Валідація типу аргументу

Давайте створимо Proxy, який перевіряє аргументи, передані функції, яка обчислює площу прямокутника.

            function calculateArea(width, height) {
  return width * height;
}

const validator = {
  apply: function(target, thisArg, argumentsList) {
    if (argumentsList.length !== 2) {
      throw new Error('calculateArea requires exactly two arguments: width and height.');
    }

    const width = argumentsList[0];
    const height = argumentsList[1];

    if (typeof width !== 'number' || typeof height !== 'number') {
      throw new TypeError('Width and height must be numbers.');
    }

    if (width <= 0 || height <= 0) {
      throw new RangeError('Width and height must be positive values.');
    }

    return target.apply(thisArg, argumentsList);
  }
};

const proxy = new Proxy(calculateArea, validator);

console.log(proxy(5, 10)); // Output: 50

try {
  console.log(proxy(5)); // Throws Error
} catch (e) {
  console.error(e);
}

try {
  console.log(proxy('5', 10)); // Throws TypeError
} catch (e) {
  console.error(e);
}

            

              
                Copy
              
            
          

У цьому прикладі обробник apply перевіряє кількість і типи аргументів, переданих функції calculateArea. Якщо аргументи недійсні, він викликає помилку до фактичного виконання функції. Важливий рядок `return target.apply(thisArg, argumentsList);` фактично виконує оригінальну функцію з наданими аргументами.

Валідація створення об'єкта за допомогою обробника construct

Обробник construct дозволяє перехоплювати оператор new і перевіряти аргументи, передані функції конструктора. Це особливо корисно для застосування обмежень до об'єктів, створених за допомогою конструкторів.

Приклад: Обов'язкові властивості

Давайте створимо Proxy, який гарантує, що об'єкт User завжди створюється з username та email.

            class User {
  constructor(username, email) {
    this.username = username;
    this.email = email;
  }
}

const validator = {
  construct: function(target, argumentsList) {
    if (argumentsList.length !== 2) {
      throw new Error('User constructor requires two arguments: username and email.');
    }

    const username = argumentsList[0];
    const email = argumentsList[1];

    if (typeof username !== 'string' || username.length === 0) {
      throw new TypeError('Username must be a non-empty string.');
    }

    if (typeof email !== 'string' || !email.includes('@')) {
      throw new TypeError('Email must be a valid email address.');
    }

    return new target(...argumentsList);
  }
};

const UserProxy = new Proxy(User, validator);

const user1 = new UserProxy('john.doe', 'john.doe@example.com'); // Works fine

try {
  const user2 = new UserProxy('john.doe'); // Throws Error
} catch (e) {
  console.error(e);
}

try {
  const user3 = new UserProxy('john.doe', 'invalid_email'); // Throws TypeError
} catch (e) {
  console.error(e);
}

console.log(user1);

            

              
                Copy
              
            
          

У цьому прикладі обробник construct перевіряє кількість і типи аргументів, переданих конструктору User. Якщо аргументи недійсні, він викликає помилку до створення об'єкта. Рядок `return new target(...argumentsList);` фактично створює новий екземпляр класу з використанням наданих аргументів.

Розширені методи валідації

Крім базової перевірки типу та валідації діапазону, Proxies можна використовувати для більш просунутих сценаріїв валідації.

Валідація між властивостями

Ви можете використовувати Proxies для перевірки зв'язків між різними властивостями. Наприклад, ви можете переконатися, що дата початку завжди передує даті закінчення.

            const event = {
  startDate: '2024-01-15',
  endDate: '2024-01-20'
};

const validator = {
  set: function(target, property, value) {
    target[property] = value; // Set the value first

    if (property === 'endDate' && target.startDate > target.endDate) {
      throw new Error('End date must be after start date.');
    }

    return true;
  }
};

const proxy = new Proxy(event, validator);

proxy.endDate = '2024-01-25'; // Works fine

try {
  proxy.endDate = '2024-01-10'; // Throws Error
} catch (e) {
  console.error(e);
}

            

              
                Copy
              
            
          

Асинхронна валідація

Хоча це менш поширено, ви можете використовувати Proxies з асинхронними операціями для більш складних сценаріїв валідації. Це може включати здійснення викликів API для перевірки даних із зовнішніх джерел.

Важлива примітка: Асинхронні операції в обробниках Proxy можуть бути складними, і з ними слід поводитися обережно, щоб уникнути блокування циклу подій. Часто краще виконувати асинхронну валідацію поза обробником Proxy, а потім використовувати Proxy для застосування результатів.

Переваги використання Proxies для валідації

• Централізована логіка валідації: Proxies дозволяють централізувати логіку валідації в одному місці, що полегшує підтримку та оновлення.
• Покращена читабельність коду: Відокремлюючи логіку валідації від основної логіки об'єкта, ви можете покращити читабельність і зручність підтримки коду.
• Підвищена типобезпека: Proxies допомагають забезпечити типобезпеку, зменшуючи ризик помилок, спричинених неправильними типами даних.
• Гнучкість і налаштування: Proxies забезпечують високий рівень гнучкості, дозволяючи налаштовувати правила валідації відповідно до конкретних потреб вашого додатку.

Обмеження використання Proxies

• Навантаження на продуктивність: Proxies створюють невелике навантаження на продуктивність через перехоплення об'єктних операцій. Це навантаження зазвичай незначне для більшості додатків, але важливо враховувати його в критичних до продуктивності сценаріях.
• Сумісність: Хоча Proxies підтримуються в сучасних браузерах і Node.js, вони не підтримуються в старих середовищах. Можливо, вам знадобиться використовувати поліфіли для забезпечення сумісності зі старими браузерами.
• Налагодження: Налагодження коду, який використовує Proxies, може бути трохи складнішим через перехоплення об'єктних операцій. Однак сучасні інструменти розробника забезпечують хорошу підтримку налагодження Proxies.

Найкращі практики для валідації Proxy Handler

• Тримайте обробники простими: Уникайте складної логіки в обробниках Proxy, щоб мінімізувати навантаження на продуктивність і покращити читабельність.
• Надавайте чіткі повідомлення про помилки: Викликайте інформативні повідомлення про помилки, які допомагають розробникам зрозуміти, чому не вдалася валідація.
• Враховуйте продуктивність: Пам'ятайте про вплив Proxies на продуктивність, особливо в критичних до продуктивності додатках.
• Використовуйте з обережністю: Не зловживайте Proxies. Використовуйте їх стратегічно для валідації та інших завдань метапрограмування, де вони забезпечують чітку перевагу.
• Ретельно тестуйте: Ретельно протестуйте логіку валідації на основі Proxy, щоб переконатися, що вона працює належним чином у всіх сценаріях.

Глобальні міркування щодо валідації

Під час розробки додатків для глобальної аудиторії важливо враховувати культурні відмінності та регіональні варіації під час реалізації правил валідації. Ось деякі ключові міркування:

• Формати дати й часу: Використовуйте бібліотеку, як-от Moment.js або date-fns, щоб правильно обробляти формати дати й часу для різних локалей. Наприклад, у Сполучених Штатах дати часто форматуються як MM/DD/YYYY, а в Європі зазвичай форматуються як DD/MM/YYYY.
• Формати чисел: Пам'ятайте про різні формати чисел, включаючи десяткові роздільники та роздільники тисяч. У деяких країнах як десятковий роздільник використовується кома, а в інших – крапка.
• Формати валют: Відображайте значення валют у правильному форматі для локалі користувача, включаючи відповідний символ валюти та точність десяткових знаків.
• Формати адрес: Формати адрес значно відрізняються в усьому світі. Розгляньте можливість використання бібліотеки або API, які підтримують міжнародну валідацію та форматування адрес.
• Формати номерів телефонів: Використовуйте бібліотеку, яка підтримує міжнародну валідацію та форматування номерів телефонів, щоб забезпечити правильне введення номерів телефонів.
• Формати імен: Пам'ятайте, що формати імен можуть відрізнятися в різних культурах. У деяких культурах використовується ім’я, за яким слідує прізвище, тоді як в інших – прізвище, за яким слідує ім’я. Крім того, деякі культури мають кілька імен або прізвищ.
• Набори символів: Переконайтеся, що ваш додаток підтримує різні набори символів і кодування для розміщення імен, адрес та інших текстових даних різними мовами.
• Культурна чутливість: Будьте уважні до культурної чутливості під час розробки правил валідації. Наприклад, певні типи даних можуть вважатися приватними або конфіденційними в деяких культурах.

Приклад: Міжнародна валідація номерів телефонів

            // Assuming you're using a library like "google-libphonenumber"

import { parsePhoneNumberFromString, AsYouType } from 'google-libphonenumber';

function validatePhoneNumber(phoneNumber, countryCode) {
  try {
    const number = parsePhoneNumberFromString(phoneNumber, countryCode);
    if (number && number.isValid()) {
      return true;
    } else {
      return false;
    }
  } catch (error) {
    return false; // Invalid phone number format
  }
}

// Example Usage (Germany)
const isValidGermanNumber = validatePhoneNumber('+4917612345678', 'DE');
console.log('Is valid German number:', isValidGermanNumber); // Output: true

// Example Usage (United States)
const isValidUSNumber = validatePhoneNumber('+15551234567', 'US');
console.log('Is valid US number:', isValidUSNumber); // Output: true

            

              
                Copy
              
            
          

Висновок

JavaScript Proxies надають потужний і гнучкий механізм для реалізації логіки валідації у ваших додатках. За допомогою Proxy handlers ви можете застосовувати обмеження та типобезпеку до властивостей об’єктів, аргументів функцій і створення об’єктів, що призводить до більш надійного, підтримуваного та безпечного коду. Не забувайте враховувати наслідки для продуктивності та проблеми сумісності під час використання Proxies, і завжди ретельно перевіряйте логіку валідації. Дотримуючись найкращих практик, викладених у цій публікації в блозі, ви можете ефективно використовувати Proxies для покращення якості та надійності ваших програм JavaScript, обслуговуючи глобальну аудиторію за допомогою локалізованих стратегій валідації.